<template>
  <el-drawer
    v-model="dialogVisible"
    title="新增协作项"
    direction="rtl"
    size="100%"
    :before-close="beforeClose"
  >
    <template #default>
      <el-form
        ref="formRef"
        :model="formData"
        :rules="formRules"
        label-width="80px"
        style="margin: 10px"
      >
        <el-form-item label="协作标题" prop="taskName">
          <el-input v-model="formData.taskName" placeholder="请输入任务名称"/>
        </el-form-item>

        <el-form-item label="执行人" prop="executeUser">
          <cascader-user
            v-model="formData.executeUser" :options="{multiple: true}"
                         placeholder="请输入执行人"/>
        </el-form-item>

        <el-form-item label="截止时间" prop="deadline">
          <el-date-picker
            v-model="formData.deadline"
            type="datetime"
            value-format="x"
            placeholder="请选择协作项截止时间"
          />
        </el-form-item>

        <el-form-item label="协作内容" prop="content">
          <editor v-model="formData.content" height="300px"/>
        </el-form-item>

        <el-form-item label="优先级" prop="priority">
          <el-select
            v-model="formData.priority"
            placeholder="请选择优先级"
          >
            <el-option
              v-for="dict in getDictOptions(DICT_TYPE.BUSINESS_PRIORITY)"
              :key="dict.value"
              :value="dict.value"
              :label="dict.name"
            />
          </el-select>
        </el-form-item>

        <el-form-item label="关联文件" prop="taskFile">
          <upload-file v-model="formData.taskFile"/>
        </el-form-item>

        <!--        <el-form-item label="协助人" prop="assistUser">-->
        <!--          <template #label>-->
        <!--            <div>-->
        <!--              <el-tooltip content="当不清楚协作项执行人时，填写协助人，协作项会被指派" effect="dark">-->
        <!--                <i class="el-icon-question"></i>-->
        <!--              </el-tooltip>-->
        <!--              <span style="margin-left: 5px;">协助人</span>-->
        <!--            </div>-->
        <!--          </template>-->
        <!--          <cascader-user v-model="formData.assistUser" placeholder="请输入协助人"/>-->
        <!--        </el-form-item>-->
      </el-form>
    </template>

    <template #footer>
      <div style="flex: auto">
        <el-button @click="dialogVisible=false">取 消</el-button>
        <el-button type="primary" @click="submitForm" :disabled="formLoading">确定</el-button>
      </div>
    </template>
  </el-drawer>
</template>


<script setup>
import {useRoute} from "vue-router";
import {DICT_TYPE, getDictOptions} from "@/utils/dict";
import {WorkTaskApi} from "@/api/business/synergy/work/task";

const message = useMessage() // 消息弹窗
const {t} = useI18n() // 国际化
const route = useRoute()
const formLoading = ref(false)
const dialogVisible = ref(false) // 弹窗的是否展示

const formData = ref({
  id: undefined,
  taskName: undefined,
  parentId: undefined,
  finishState: undefined,
  creatorDept: undefined,
  executeUser: undefined,
  deadline: undefined,
  content: undefined,
  priority: undefined,
  label: undefined,
  taskFile: undefined,
  remark: undefined,
  assistUser: undefined
})
const formRules = reactive({
  taskName: [{required: true, message: '任务名称不能为空', trigger: 'blur'}],
  executeUser: [{required: true, message: '执行人不能为空', trigger: 'blur'}]
})
const formRef = ref() // 表单 Ref
const parentId = ref(null)

/** 打开弹窗 */
const open = async (parent) => {
  parentId.value = null
  if (parent != null) {
    parentId.value = parent
    console.log(parentId.value)
  }
  dialogVisible.value = true
  resetForm()
}
defineExpose({open}) // 提供 open 方法，用于打开弹窗

/** 提交表单 */
const emit = defineEmits(['success']) // 定义 success 事件，用于操作成功后的回调
const submitForm = async () => {
  // 校验表单
  await formRef.value.validate()
  // 提交请求
  formLoading.value = true
  try {
    if (Array.isArray(formData.value.taskFile)) {
      formData.value.taskFile = formData.value.taskFile.join(',')
    }
    if (Array.isArray(formData.value.executeUser)) {
      formData.value.executeUser = formData.value.executeUser.join(',')
    }
    if (Array.isArray(formData.value.assistUser)) {
      formData.value.assistUser = formData.value.assistUser.join(',')
    }
    if (parentId.value != null) {
      formData.value.parentId = parentId.value
    }
    await WorkTaskApi.createWorkTask(formData.value)
    message.success(t('common.createSuccess'))
    dialogVisible.value = false
    emit('success')
  } finally {
    formLoading.value = false
  }
}

/** 重置表单 */
const resetForm = () => {
  formData.value = {
    id: undefined,
    taskName: undefined,
    parentId: undefined,
    finishState: undefined,
    creatorDept: undefined,
    executeUser: undefined,
    deadline: undefined,
    content: undefined,
    priority: undefined,
    label: undefined,
    taskFile: undefined,
    remark: undefined,
    assistUser: undefined
  }
  formRef.value?.resetFields()
}

const beforeClose = (done) => {
  ElMessageBox.confirm('确认取消提交吗？').then(() => {
    resetForm()
    done()
  }).catch(() => {
    // 取消关闭
  })
}
</script>
